.message-item {
  display: flex;
  width: 100%;
  align-items: flex-start;
  animation: fadeIn @transition-normal ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10rpx); }
  to { opacity: 1; transform: translateY(0); }
}

/* 消息气泡样式 */
.message-bubble {
  position: relative;
  word-break: break-all;
  border-radius: 5%;
  box-shadow: 20rpx 20rpx 30rpx rgba(90, 87, 87, 0.1);
  transition: all @transition-normal;
}

/* 消息头部样式 */
.message-header {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid @border-color;
  border-radius: 5%;
}
.message-body {
    height: 100%;
}


.header-icon {
  width: 56rpx;
  height: 56rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-icon image {
  width: 56rpx;
  height: 56rpx;;
}

.header-content {
  flex: 1;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 4rpx;
}

.header-time {
  font-size: 24rpx;
  color: white;
}

/* 响应式调整 */
@media (max-width: @breakpoint-sm) {
  .message-bubble {
    max-width: 80%;
  }

  .avatar {
    width: 72rpx;
    height: 72rpx;
  }

  .message-header {
    margin-bottom: 12rpx;
    padding-bottom: 8rpx;
  }

  .header-title {
    font-size: 28rpx;
  }

  .header-time {
    font-size: 22rpx;
  }
}

// 图片样式
.body-image {
    width: 100%;
    height: 240rpx;
    overflow: hidden;
  }
  
  .body-image image {
    width: 100%;
    height: 100%;
    border-radius: 5%;
    object-fit: cover;
  }
